<template lang="pug">
  v-container
    OrderDetails(ref="details" :order="order" @refresh="refresh")
    v-card
      v-toolbar
        v-text-field(prepend-inner-icon="search" placeholder="搜索" hide-details v-model="query" clearable)
        v-spacer
        v-toolbar-items
          v-btn(text @click="refresh") 刷新
          v-btn(text @click="add") 新增订单
      v-divider
      v-card-text.pa-0.mt-4
        OrderDataTable(@edit="edit" ref="dataGrid" :query.sync = "query")
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import OrderDetails from './order_details'
  import OrderDataTable from './order_data_table'
  import {Order} from '@/store/modules/types/Order'
  import {mapActions, mapMutations} from 'vuex'

  export default (Vue as VueConstructor<Vue & {
    buildEmptyOrder: () => Order,
    allCustomers: () => void
    allPaymentMethods: () => void
    clearOrderItems: () => void
    setActive: (order: Order) => void
    fetchOrderItemsByOrderId: (id: string) => void
    $refs: {
      details: OrderDetails
    }
  }>).extend({
    components: { OrderDetails, OrderDataTable },
    methods: {
      ...mapActions("order", ["allCustomers", "allPaymentMethods", "fetchOrderItemsByOrderId", "fetchOrderBundlesByOrderId"]),
      ...mapMutations("order", ["setActive", "clearOrderItems", "clearOrderBundles"]),
      buildEmptyOrder() {
        return {
          id: null,
          order_number: null,
          customer_id: null,
          customer: {
            id: null,
            name: null
          },
          description: null,
          expected_rental_out_date: null,
          expected_return_date: null,
          expected_ship_date: null,
          real_rental_out_date: null,
          real_return_date: null,
          real_ship_date: null,
          status_id: 1,
          payment_method_id: null,
          is_paid: false,
          paid_at: null,
          net_amount: 0,
          paid_amount: 0,
          payable_amount: 0,
          ship_address: null,
          identification_number: null,
          location: null,
          discount: 1,
          created_by: null,
          assigned_to: null,
          created_at: null,
          updated_at: null,
          deleted_at: null,
          status: null,
          payment_method: null,
        }
      },
      refresh() {
        this.$refs.dataGrid.refresh()
      },
      add() {
        this.order = this.buildEmptyOrder()
        this.setActive(this.order)
        this.clearOrderItems()
        this.clearOrderBundles()
        this.$refs.details.create('新增订单')
      },
      edit(item: Order) {
        this.setActive(item)
        this.clearOrderItems()
        this.clearOrderBundles()
        this.order = item
        this.fetchOrderItemsByOrderId(this.order.id)
        this.fetchOrderBundlesByOrderId(this.order.id)
        this.$refs.details.toggle(`订单 ${this.order.order_number}`)
      }
    },
    data() {
      let _emptyOrder = this.buildEmptyOrder()
      return {
        order: _emptyOrder,
        query: ''
      }
    },
    mounted(): void {
      this.allCustomers()
      this.allPaymentMethods()
    }
  })
</script>
